<template>
  <ContentWrap>
    <el-card>
      <template #header>
        <div class="card-header">
          <span class="title">样品信息</span>
          <div class="right-button">
            <el-button type="primary" v-if="formData.status !=3"  @click="handleSubmit(3)">同意</el-button>
            <!-- <el-button  @click="handleSubmit(2)">退回</el-button> -->
            <el-button v-if="formData.status !=3"  @click="clickReturn">退回</el-button>
            <el-button @click="goBack">取消</el-button>
          </div>
        </div>
      </template>

      <el-form
        ref="formRef"
        :model="formData"
        :rules="rules"
        label-width="120px"
        class="mt-20px"
      >
        <!-- 项目信息 -->
        <el-card class="mb-4">
          <template #header>
            <div class="text-lg font-bold">基本信息</div>
          </template>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="样品名称" prop="sampleName">
                <el-input v-model="formData.sampleName" disabled placeholder="请输入样品名称" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="样品编号" prop="sampleNum">
                <el-input v-model="formData.sampleNum" disabled placeholder="请输入样品编号" />
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="盲样编号" prop="blindSampleNum">
                <el-input v-model="formData.blindSampleNum" disabled placeholder="请输入样品编号" />
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="规格型号" prop="model">
                <el-input v-model="formData.model" disabled placeholder="请输入规格型号" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="执行标准" prop="executiveStandard">
                <el-input v-model="formData.executiveStandard" disabled placeholder="请输入执行标准" />
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="委托单位" prop="entrustCompany">
                <el-input v-model="formData.entrustCompany" disabled placeholder="请输入委托单位" />
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="受检单位" prop="receiveCheckCompany">
                <el-input v-model="formData.receiveCheckCompany" disabled placeholder="请输入受检单位" />
              </el-form-item>
            </el-col>
            
            <el-col :span="8">
              <el-form-item label="生产单位" prop="productionCompany">
                <el-input v-model="formData.productionCompany" disabled placeholder="请输入生产单位" />
              </el-form-item>
            </el-col>
            <!-- <el-col :span="8">
              <el-form-item label="项目起始日期" prop="projectStartDate">
                <el-date-picker
                  v-model="formData.projectStartDate"
                  type="date"
                  placeholder="选择日期"
                  value-format="YYYY-MM-DD"
                />
              </el-form-item>
            </el-col> -->
            <!-- <el-col :span="8">
              <el-form-item label="项目截止日期" prop="projectEndDate">
                <el-date-picker
                  v-model="formData.projectEndDate"
                  type="date"
                  placeholder="选择日期"
                  value-format="YYYY-MM-DD"
                />
              </el-form-item>
            </el-col> -->
          </el-row>

          <!-- <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="甲方单位" prop="partyA">
                <el-input v-model="formData.partyA" placeholder="请输入甲方单位" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="合同金额" prop="contractAmount">
                <el-input
                  v-model="formData.contractAmount" 
                
                  placeholder="请输入合同金额（万元）" 
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="合同编号" prop="contractNum">
                <el-input v-model="formData.contractNum" placeholder="请输入合同编号" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="项目管理员" prop="projectManager">
                <el-input v-model="formData.projectManager" placeholder="请输入项目管理员" />
              </el-form-item>
            </el-col>
          </el-row> -->
        </el-card>

        <!-- 基本信息 -->
        <el-card class="mb-4">
          <template #header>
            <div class="text-lg font-bold">抽样信息</div>
          </template>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="抽样地点" prop="samplingSite">
                <el-input v-model="formData.samplingSite" disabled placeholder="请输入抽样地点" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="抽样日期"  prop="samplingDate">
                <el-date-picker
                disabled
                  v-model="formData.samplingDate"
                  type="date"
                  placeholder="选择日期"
                  value-format="YYYY-MM-DD"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="样品批号"  prop="sampleBatchNum">
                <el-input disabled v-model="formData.sampleBatchNum" placeholder="请输入样品批号" />
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="生产日期"  prop="productionDate">
                <el-date-picker
                disabled
                  v-model="formData.productionDate"
                  type="date"
                  placeholder="选择日期"
                  style="width: 100%"
                  value-format="YYYY-MM-DD"
                />
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="产品包装"  prop="productPackaging">
                <el-input disabled v-model="formData.productPackaging" placeholder="请输入产品包装" />
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="存放条件"  prop="storeCondition">
                <el-input disabled v-model="formData.storeCondition" placeholder="请输入物资编码" />
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="物资编码"  prop="sampleCode">
                <el-input disabled v-model="formData.sampleCode" placeholder="请输入物资编码" />
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="抽样基数"  prop="samplingCardinalNum">
                <el-input disabled v-model="formData.samplingCardinalNum" placeholder="请输入抽样基数" />
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="抽取样品量"  prop="samplingQuantity">
                <el-input disabled v-model="formData.samplingQuantity" placeholder="请输入抽样基数" />
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="封样形式"  prop="sealedSampleMethod">
                <el-input disabled v-model="formData.sealedSampleMethod" placeholder="请输入封样形式" />
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="运送方式"  prop="deliveryType">
                <el-input disabled v-model="formData.deliveryType" placeholder="请输入运送方式" />
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="抽样人员"  prop="samplingPerson">
                <el-input disabled v-model="formData.samplingPerson" placeholder="请输入运送方式" />
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="陪同抽样人"  prop="accompanySamplingPerson">
                <el-input disabled v-model="formData.accompanySamplingPerson" placeholder="请输入陪同抽样人" />
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="委检单位人员"  prop="receiveCheckCompanyPerson">
                <el-input disabled v-model="formData.receiveCheckCompanyPerson" placeholder="请输入陪同抽样人" />
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="抽样方式" prop="samplingType">
                <!-- <el-input v-model="formData.samplingType" placeholder="请输入陪同抽样人" /> -->
                <el-select disabled v-model="formData.samplingType" placeholder="请选择抽样方式">
                  <el-option label="委托方自行抽样 " :value="0" />
                  <el-option label="机构自抽自检" :value="1" />
                  <el-option label="第三方抽样" :value="2" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <!-- <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="执行标准" prop="executiveStandard">
                <el-input v-model="formData.executiveStandard" placeholder="请输入执行标准" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="标准类型" prop="standardType">
                <el-select v-model="formData.standardType" placeholder="请选择标准类型">
                  <el-option label="手填" value="0" />
                  <el-option label="选择" value="1" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="盲样编号" prop="blindSampleNum">
                <el-input v-model="formData.blindSampleNum" placeholder="请输入盲样编号" />
              </el-form-item>
            </el-col>
          </el-row> -->
        </el-card>

        <!-- 单位信息 -->
        <!-- <el-card class="mb-4">
          <template #header>
            <div class="text-lg font-bold">单位信息</div>
          </template>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="委托单位" prop="entrustCompany">
                <el-input v-model="formData.entrustCompany" placeholder="请输入委托单位" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="生产单位" prop="productionCompany">
                <el-input v-model="formData.productionCompany" placeholder="请输入生产单位" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="受检单位" prop="receiveCheckCompany">
                <el-input v-model="formData.receiveCheckCompany" placeholder="请输入受检单位" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-card> -->

        <!-- 抽样信息 -->
        <el-card class="mb-4">
          <template #header>
            <div class="text-lg font-bold">抽样单签字版扫描件、样品照片</div>
          </template>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="附件上传" prop="attachments">
                <el-upload
                  action="#"
                  disabled
                  :auto-upload="false"
                  :on-change="handleFileChange"
                   :file-list="fileList1"
                   :on-preview="handlePreview"
                >
                <el-button type="primary" disabled>上传附件</el-button>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>


        </el-card>

        <!-- 退样说明 -->
        <el-card class="mb-4">
          <template #header>
            <div class="text-lg font-bold">检验要求</div>
          </template>
          <el-row :gutter="24">
         
              <el-col :span="8">
              <el-form-item label="报告编号" prop="reportNum">
                <el-input disabled v-model="formData.reportNum" placeholder="请输入报告编号" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
            <el-form-item label="检验时限" prop="checkStartTime"  style="width: 100%;">
                <!-- <el-date-picker
                disabled
                  v-model="formData.checkStartTime"
                  type="date"
                  placeholder="选择日期"
                  value-format="YYYY-MM-DD"
                  style="width: 100%;"
                /> -->
                <el-input v-model="formData.checkStartTime" disabled placeholder="请输入样品编号" />
              </el-form-item>
            </el-col>
            <!-- <el-col :span="8">
              <el-form-item label="生产日期" prop="model">
                <el-date-picker
                  v-model="formData.projectStartDate"
                  type="date"
                  placeholder="选择日期"
                  value-format="YYYY-MM-DD"
                />
              </el-form-item>
            </el-col> -->
            <el-col :span="8">
              <el-form-item label="结果要求" prop="resultRequire">
                <el-radio-group disabled v-model="formData.resultRequire">
                  <el-radio :label="0">出具检测结果</el-radio>
                  <el-radio :label="1">判定检验结果</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>


          </el-row>

          <el-row :gutter="24">
            <el-col :span="8">
              <el-form-item label="指标要求" prop="targetRequire">
                <el-radio-group disabled v-model="formData.targetRequire">
                  <el-radio :label="0">指定检测项目</el-radio>
                  <el-radio :label="1">按照检验依据要求</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="检验依据" prop="checkAccordingTo">
                <el-input disabled v-model="formData.checkAccordingTo" placeholder="请输入检验依据" />
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="备注" prop="remark">
                <el-input disabled v-model="formData.requireRemark" placeholder="请输入检验备注" />
              </el-form-item>
            </el-col>
            </el-row>



            <!-- <el-col :span="12">
              <el-form-item label="附件上传" prop="attachments">
                <el-upload
                  action="#"
                  disabled
                  list-type="picture-card"
                  :auto-upload="false"
                  :on-change="handleFileChange1"
                   :file-list="fileList1"
                >
                  <el-icon><Plus /></el-icon>
                </el-upload>
              </el-form-item>
            </el-col> -->


        </el-card>

        <el-card class="mb-4">
          <template #header>
            <div class="text-lg font-bold">检验信息</div>
          </template>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="报告编号" prop="reportNum">
                <el-input v-model="formData.reportNum" disabled placeholder="请输入报告编号" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="检测开始日期" prop="checkStartTime">
                <el-input v-model="formData.checkStartTime" disabled placeholder="请输入样品编号" />
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="检验结束日期" prop="checkEndTime">
                <el-input v-model="formData.checkEndTime" disabled placeholder="请输入样品编号" />
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="报告日期" prop="reportDate">
                <el-input v-model="formData.reportDate" disabled placeholder="请输入规格型号" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="实验室名称" prop="labName">
                <el-input v-model="formData.labName" disabled placeholder="请输入实验室名称" />
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="主要检测设备" prop="mainCheckDevice">
                <el-input v-model="formData.mainCheckDevice" disabled placeholder="请输入主要检测设备" />
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="检验状态" prop="checkState">
                <el-select
                disabled
          v-model="formData.checkState"
          placeholder="请选择检验状态"
          clearable
          style="width: 100%"
        >
          <el-option   v-for="(item) of statusList" :key="item.value " :label="item.label" :value="item.value" />
        </el-select>
              </el-form-item>
            </el-col>
            
            <el-col :span="8">
              <el-form-item label="检验结论" prop="checkConclusion">
                <el-input disabled v-model="formData.checkConclusion" placeholder="请输入检验结论" />
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="检验人员" prop="checkPerson">
                <el-input disabled v-model="formData.checkPerson" placeholder="请输入检验人员" />
              </el-form-item>
            </el-col>

            <!-- <el-col :span="8">
              <el-form-item label="退回原因" prop="returnReason">
                <el-input disabled v-model="formData.returnReason" placeholder="请输入退回原因" />
              </el-form-item>
            </el-col> -->

          </el-row>


        </el-card>

        <!-- 检验结果 -->
        <el-card class="mb-4">
          <template #header>
            <div class="text-lg font-bold">检验结果</div>
          </template>

          <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
      <el-table-column label="序号" type="index" align="center"  />
      <el-table-column label="检测项目" align="center" prop="checkProject" />
      <el-table-column label="单位" align="center" prop="unit" />
      <el-table-column label="设计要求" align="center" prop="designRequire" />
      <el-table-column label="检验结果" align="center" prop="checkResult" />
      <el-table-column label="单位判定" align="center" prop="singleDecision" />
      <el-table-column label="执行标准" align="center" prop="executeStandardName" />
      <el-table-column label="备注" align="center" prop="remark" />

    </el-table>
</el-card>
        <!-- 检验要求 -->
        <el-card class="mb-4">
          <template #header>
            <div class="text-lg font-bold">检验报告</div>
          </template>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="附件上传" prop="attachments">
                <el-upload
                  action="#"
                  disabled
                  :on-preview="handlePreview"
                  :auto-upload="false"
                 :file-list="fileList"
                >
                 <el-button type="primary" disabled>上传附件</el-button>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>
      </el-form>
    </el-card>

    
  </ContentWrap>

<el-dialog title="退回原因" v-model="dialogVisible" width="30%">

   <el-form ref="dialogFormRef" :model="dialogForm" :rules="rules_">
        <el-form-item label="退回原因" prop="returnReason">
        <el-input v-model="dialogForm.returnReason"  placeholder="请输入退回原因" />
        </el-form-item>

        <div style="display: flex; justify-content: center;">
         <el-button style="margin-right: 10px" type="primary" @click="handleSubmit(2)">
           确定
         </el-button>
         <el-button  @click="dialogVisible = false">
           取消
         </el-button>
        </div>
   </el-form>
</el-dialog>

</template>

<script setup lang="ts">
import { reactive, ref ,onMounted} from 'vue'
import { useRouter } from 'vue-router'
import { SampleInformationApi } from '@/api/qis/sampleinformation'
import { useMessage } from '@/hooks/web/useMessage'
import { Plus } from '@element-plus/icons-vue'
import { getDictDataPage } from '@/api/system/dict/dict.data'

const router = useRouter()
const message = useMessage()
const formRef = ref()
const dialogFormRef = ref()
const dialogForm = ref({
  returnReason:''
})

const dialogVisible = ref(false)
// 退回
const clickReturn = ()=>{
  dialogVisible.value = true
}

const fileList = ref([])
const fileList1 = ref([])
let formData = reactive({
  resultRequire:'1',
  targetRequire:'1'
})
const imgUrl = ref([])

const handleFileChange = async (file: any,fileList) => {
  console.log(fileList,'fileList')
  // const   current = fileList.map(item => item.url);
  // formData.signAndSampleUrl = current.join(',')
  // console.log(formData.value.signAndSampleUrl,'formData.value.signAndSampleUrl')

  const fileDataFile = new FormData()
fileDataFile.append('file',file.raw)



const res =  await  SampleInformationApi.uploadFileApi(fileDataFile)
imgUrl.value = res
formData.signAndSampleUrl = res
message.success('上传成功')
}
const handleFileChange1 = async (file: any,fileList) => {
  console.log(fileList,'fileList')


  const fileDataFile = new FormData()
fileDataFile.append('file',file.raw)



const res =  await  SampleInformationApi.uploadFileApi(fileDataFile)
imgUrl.value = res
formData.requireAttachment = res
message.success('上传成功')
}


const handlePreview = (file)=>{
  console.log(file,'file')
  const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'svg'];
  const fileExtension = file.url.split('.').pop().toLowerCase();
  if (imageExtensions.includes(fileExtension)) {
        // 如果是图片，在新窗口中打开
        window.open(file.url, '_blank');
    } else {
        // 不是图片，进行文件下载
        const a = document.createElement('a');
        const url = file.url;
        a.download = file.name;
        a.href = url;
        a.click();
    }
}


const rules = {
  projectName: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
  sampleName: [{ required: true, message: '请输入样品名称', trigger: 'blur' }],
  sampleNum: [{ required: true, message: '请输入样品编号', trigger: 'blur' }],
  samplingDate: [{ required: true, message: '请选择抽样日期', trigger: 'change' }],
  entrustCompany: [{ required: true, message: '请输入委托单位', trigger: 'blur' }],
  productionCompany: [{ required: true, message: '请输入生产单位', trigger: 'blur' }],
  samplingSite: [{ required: true, message: '请输入抽样地点', trigger: 'blur' }],
  checkType: [{ required: true, message: '请选择检验类型', trigger: 'change' }],
}

const rules_ = {
  returnReason:[{ required: true, message: '请输入退回原因', trigger: 'blur' },{max:100,message:'最多输入100个字符',trigger:'blur'}],
}



const handleSubmit = async (status) => {
  nextTick(async ()=>{
    console.log(111)
  dialogForm.value.status = status
  dialogForm.value.id = route.query.id 
console.log(dialogFormRef.value,'dialogForm.value')


      console.log(1111)
      if(status == 2 ){
        
          await SampleInformationApi.getInfoMationApi(dialogForm.value)
        message.success('操作成功')
        goBack()

      }
      else {


        await SampleInformationApi.getInfoMationApi(dialogForm.value)
      
      message.success('操作成功')
      goBack()
      }
      try {
   
      } catch (error) {
        message.error('操作失败')
      }

  })
}
const list = ref([])

const getList = async()=>{
 const res =await  SampleInformationApi.getCheckResultPageApi({pageNo:1,pageSize:9999})
 console.log(res,'getlIST')
 list.value = res.list
 
}

const handleSave = async () => {
  if (!formRef.value) return
  await formRef.value.validate(async (valid: boolean) => {
    if (valid) {
      try {
        await SampleInformationApi.createSampleInformation(formData)
        message.success('保存成功')
        goBack()
      } catch (error) {
        message.error('保存失败')
      }
    }
  })
}

const goBack = () => {
  router.back()
}

const route = useRoute()

const getDetail = async()=>{
  fileList1.value = []
  fileList.value = []
  const res = await SampleInformationApi.getSampleInformation(route.query.id)
  console.log(res,'getDetail')
  formData = Object.assign(formData, res)
  let fileArr = res.checkReportUrl.split(';')
  let fileArr1 = res.requireAttachment.split(';')
  list.value = res.checkResultList
console.log(fileArr,'fileArr')
console.log(fileArr1,'fileArr1')


fileList.value = fileArr.map((file,index)=>{
  return {
    url:file,
    name:'附件'+(index+1),
    uid:new Date().getTime()
  }
})
console.log(fileList.value,'fileList')
fileList1.value = fileArr1.map((file,index)=>{
  return {
    url:file,
    name:'附件'+(index+1),
    uid:new Date().getTime()
  }
})
// fileArr.forEach((file,index)=>{
//    fileList1.value.push({
//     url:file,
//     name:'附件'+(index+1),
//     uid:new Date().getTime()
//    })
//  })

//  fileArr1.forEach((file,index)=>{
//    fileList.value.push({
//     url:file,
//     name:'附件'+(index+1),
//     uid:new Date().getTime()
//    })
//  })

  // console.log(fileList1.value,'fileList1')
}


const statusList = ref([])
// 获取检验状态字典
const getDictDataPageApi = async ()=>{
 const res = await  getDictDataPage({
    dictType:'check_state'
  })
  statusList.value = res.list.map(v=>{
    return {
      label:v.label,
      value:Number(v.value)
    }
  })
  console.log(res,'状态字典')
}

// const getDetail = async()=>{
//   const res = await SampleInformationApi.getSampleInformationPage(route.query.id)
//   console.log(res)
// }

// const validatorReturnReason = (rule: any, value: any, callback: any){  
//   console.log(rule)
//     if(value.length <= 0){
//       callback(new Error('请输入退回原因'))
//   if (value.length > 100) {
//     callback(new Error('最多输入100个字符'))
//   } else {
//     callback()
//   }
//     }
// }


const validatorReturnReason = (rule: any, value: any, callback: any) => {
  console.log(rule);
  console.log(value);
  if (value.length <= 0) {
    callback(new Error('请输入退回原因'));
  } else if (value.length > 100) {
    callback(new Error('最多输入100个字符'));
  } else {
    callback();
  }
};


const dialogRules = ref({
  returnReason:[{validator:validatorReturnReason,trigger:'blur'}],
  
})



onMounted(()=>{
  getDetail()

  if(route.query.id){
    route.meta.title = '编辑检验信息审批'
  }else {
    route.meta.title = '新增检验信息审批'
  }

  // getList()

  getDictDataPageApi()
})

onActivated(()=>{
  getDetail()
})
</script>

<style lang="scss" scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .title {
    font-size: 16px;
    font-weight: bold;
  }

  .right-button {
    display: flex;
    gap: 10px;
  }
}

.mb-4 {
  margin-bottom: 1rem;
}

.text-lg {
  font-size: 1.125rem;
}

.font-bold {
  font-weight: bold;
}

:deep(.el-upload--picture-card) {
  width: 100px;
  height: 100px;
  line-height: 100px;
}
</style> 